{"componentChunkName":"component---src-templates-post-tsx","path":"/bubble-sort.md/","result":{"data":{"markdownRemark":{"html":"<ul>\n<li>버블 정렬(Bubble Sort)이란?</li>\n<li>버블 정렬 살펴보기</li>\n<li>버블 정렬 실행해보기 with 자바스크립트</li>\n</ul>\n<hr>\n<h2 id=\"버블-정렬bubble-sort이란\" style=\"position:relative;\"><a href=\"#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%ACbubble-sort%EC%9D%B4%EB%9E%80\" aria-label=\"버블 정렬bubble sort이란 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>버블 정렬(Bubble Sort)이란?</h2>\n<p>서로 인접한 두 원소를 검사해 정렬하는 알고리즘이다.</p>\n<ul>\n<li>오름차순을 기준으로 정렬한다.</li>\n<li>큰 숫자가 왼쪽에서 오른쪽을 향해 거품처럼 이동하는 모습</li>\n</ul>\n<h2 id=\"버블-정렬-살펴보기\" style=\"position:relative;\"><a href=\"#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%AC-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0\" aria-label=\"버블 정렬 살펴보기 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>버블 정렬 살펴보기</h2>\n<ul>\n<li>이웃한 데이터의 값을 비교해 값의 크기가 다르면 위치를 바꾼다</li>\n<li>오름차순으로 정렬할 경우 왼쪽 데이터의 크기가 오른쪽 데이터의 크기보다 크면 위치를 바꾼다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 239px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7ceb6840cc18d4169ea257bb1aaa783f/4a279/bubbleSortEx.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 320.94594594594594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"실행 화면\"\n        title=\"실행 화면\"\n        src=\"/static/7ceb6840cc18d4169ea257bb1aaa783f/4a279/bubbleSortEx.png\"\n        srcset=\"/static/7ceb6840cc18d4169ea257bb1aaa783f/12f09/bubbleSortEx.png 148w,\n/static/7ceb6840cc18d4169ea257bb1aaa783f/4a279/bubbleSortEx.png 239w\"\n        sizes=\"(max-width: 239px) 100vw, 239px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"계산량-확인해보기\" style=\"position:relative;\"><a href=\"#%EA%B3%84%EC%82%B0%EB%9F%89-%ED%99%95%EC%9D%B8%ED%95%B4%EB%B3%B4%EA%B8%B0\" aria-label=\"계산량 확인해보기 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>계산량 확인해보기</h3>\n<p>데이터의 총 개수를 n이라고 하면 버블 정렬의 비교 횟수는\n처음에 n-1 번, 그 다음은 n-2, n-3 번 ... 이다.</p>\n<p>반복 횟수는 (n-1) + (n-2) + (n-3) + ... + 1 이므로 (n²-n)/2이다.<br>\n즉 버블 정렬의 오더는 O(n²)이 된다.</p>\n<h2 id=\"버블-정렬-실행해보기-with-자바스크립트\" style=\"position:relative;\"><a href=\"#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%AC-%EC%8B%A4%ED%96%89%ED%95%B4%EB%B3%B4%EA%B8%B0-with-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8\" aria-label=\"버블 정렬 실행해보기 with 자바스크립트 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>버블 정렬 실행해보기 with 자바스크립트</h2>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token comment\">&lt;!-- html --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>form</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>inputForm<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span>버블 정렬<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>str<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">size</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>50<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>text<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>button<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>정렬하기<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">onClick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>doSort()<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>form</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>form</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>outputForm<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span>정렬 결과<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>textarea</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>result<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">cols</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>50<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">rows</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>20<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>textarea</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>form</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// javascript</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">doSort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">let</span> inputForm <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span>forms<span class=\"token punctuation\">.</span>inputForm<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> outputForm <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span>forms<span class=\"token punctuation\">.</span>outputForm<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> ary <span class=\"token operator\">=</span> inputForm<span class=\"token punctuation\">.</span>str<span class=\"token punctuation\">.</span>value<span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">','</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  ary <span class=\"token operator\">=</span> ary<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token function\">Number</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> ary<span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">' '</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">'\\n'</span><span class=\"token punctuation\">;</span>\n  outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">+</span> <span class=\"token string\">'----'</span> <span class=\"token operator\">+</span> <span class=\"token string\">'\\n'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">bubbleSort</span><span class=\"token punctuation\">(</span>ary<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">+</span> <span class=\"token string\">'----'</span> <span class=\"token operator\">+</span> <span class=\"token string\">'\\n'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">printAry</span><span class=\"token punctuation\">(</span>ary<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">+</span> <span class=\"token string\">'done!'</span> <span class=\"token operator\">+</span> <span class=\"token string\">'\\n'</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">function</span> <span class=\"token function\">bubbleSort</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ary</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">&lt;</span> ary<span class=\"token punctuation\">.</span>length <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">let</span> j <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>j <span class=\"token operator\">&lt;</span> ary<span class=\"token punctuation\">.</span>length <span class=\"token operator\">-</span> i <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>ary<span class=\"token punctuation\">[</span>j<span class=\"token punctuation\">]</span> <span class=\"token operator\">></span> ary<span class=\"token punctuation\">[</span>j <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token keyword\">let</span> n <span class=\"token operator\">=</span> ary<span class=\"token punctuation\">[</span>j<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n          ary<span class=\"token punctuation\">[</span>j<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> ary<span class=\"token punctuation\">[</span>j <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n          ary<span class=\"token punctuation\">[</span>j <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> n<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        j<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">printAry</span><span class=\"token punctuation\">(</span>ary<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n      i<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">function</span> <span class=\"token function\">printAry</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ary</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> outputForm<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>value <span class=\"token operator\">+</span> ary<span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">' '</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">'\\n'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h3 id=\"실행-화면\" style=\"position:relative;\"><a href=\"#%EC%8B%A4%ED%96%89-%ED%99%94%EB%A9%B4\" aria-label=\"실행 화면 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>실행 화면</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 481px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/dbb88be09af8372b5a271cae050c6550/d024a/bubbleSort.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 82.43243243243244%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA9UlEQVQoz8WTy26DMBBF+f8PTGpDAPGwx2Cbh5F4CdLb0kpNFliselde+MzReMaBkhQ/ojAMjbXruk7TNJ9lcc7db7cPxq21gZCScxayu21bL4wL4zhKISTRMAyBUqooCq2r3rllWU61c/steP4mkFIarYkUKfX0RQiBEjjs+/4Fw6y1juMYVbwwY+yAf8xEBDhJEhyOeifhnL/AIOEEXJbltm3X4KZpgKVpin4umzEumLMsQ4n/gPM8x7Qvw8YYODEqtH0ZxoPhwauqquvaC7/PGWbAXdf1fe+Foyh6XxL0jP+AxfZuGNbxBT6wI7MvaO3vx/gEV2agYSr+aK4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"실행 화면\"\n        title=\"실행 화면\"\n        src=\"/static/dbb88be09af8372b5a271cae050c6550/d024a/bubbleSort.png\"\n        srcset=\"/static/dbb88be09af8372b5a271cae050c6550/12f09/bubbleSort.png 148w,\n/static/dbb88be09af8372b5a271cae050c6550/e4a3f/bubbleSort.png 295w,\n/static/dbb88be09af8372b5a271cae050c6550/d024a/bubbleSort.png 481w\"\n        sizes=\"(max-width: 481px) 100vw, 481px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<hr>\n<h4 id=\"reference\" style=\"position:relative;\"><a href=\"#reference\" aria-label=\"reference permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Reference</h4>\n<ul>\n<li><a href=\"https://www.gilbut.co.kr/book/view?bookcode=BN002328\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">모두의 알고리즘 with 자바스크립트</a></li>\n</ul>","excerpt":"버블 정렬(Bubble Sort)이란? 버블 정렬 살펴보기 버블 정렬 실행해보기 with 자바스크립트 버블 정렬(Bubble Sort)이란? 서로 인접한 두 원소를 검사해 정렬하는 알고리즘이다. 오름차순을 기준으로 정렬한다. 큰 숫자가 왼쪽에서 오른…","tableOfContents":"<ul>\n<li><a href=\"/bubble-sort.md/#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%ACbubble-sort%EC%9D%B4%EB%9E%80\">버블 정렬(Bubble Sort)이란?</a></li>\n<li>\n<p><a href=\"/bubble-sort.md/#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%AC-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0\">버블 정렬 살펴보기</a></p>\n<ul>\n<li><a href=\"/bubble-sort.md/#%EA%B3%84%EC%82%B0%EB%9F%89-%ED%99%95%EC%9D%B8%ED%95%B4%EB%B3%B4%EA%B8%B0\">계산량 확인해보기</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/bubble-sort.md/#%EB%B2%84%EB%B8%94-%EC%A0%95%EB%A0%AC-%EC%8B%A4%ED%96%89%ED%95%B4%EB%B3%B4%EA%B8%B0-with-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8\">버블 정렬 실행해보기 with 자바스크립트</a></p>\n<ul>\n<li><a href=\"/bubble-sort.md/#%EC%8B%A4%ED%96%89-%ED%99%94%EB%A9%B4\">실행 화면</a></li>\n</ul>\n</li>\n</ul>","fields":{"slug":"/bubble-sort.md/"},"frontmatter":{"title":"버블 정렬(Bubble Sort)","date":"Jul 12, 2021","tags":["알고리즘","JavaScript"],"keywords":["argorithm","버블 정렬","bubble","javascript"],"update":"Jan 01, 0001"}}},"pageContext":{"slug":"/bubble-sort.md/","series":[],"lastmod":"2021-07-12"}},"staticQueryHashes":["2027115977","694178885"]}